<template>
  <div id="app">
      <el-container>
          <el-header>
              <span>门店信息</span>
          </el-header>
          <el-main>
          <el-table
          :data="storedata"
          stripe
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">    
          <el-table-column
                              prop="id"
                              label="id"
                              width="150" >
                              </el-table-column>        
             <el-table-column
                              prop="storeName"
                              label="店名"
                              width="150" >
                              </el-table-column>
              <el-table-column
                              prop="location"
                              label="门店位置"
                              width="300" >
                              </el-table-column>
              <el-table-column
                              prop="telephone"
                              label="电话"
                              width="200"
                               >
                              </el-table-column>
              <el-table-column
                          fixed="right"
                          label="操作"
                          >
                          <template slot-scope="scope">
                              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                          </template>
                          <el-button @click="handledel()" type="text" size="small">删除</el-button>
                      </el-table-column>           
              <el-table-column
                          fixed="right">
                            <el-button type="success" circle icon="el-icon-plus" @click="addDialogVisible=true"></el-button>
                         
                      </el-table-column>                
          </el-table>
          
          
          </el-main>
          <el-aside></el-aside>
          <el-footer>
          </el-footer>
          <el-dialog
          title="添加店铺"
          :visible.sync="addDialogVisible"
          width="30%"
          >
          <el-form :model="addForm" class="demo-form-inline">
            <el-form-item label="门店位置">
                  <el-input v-model="addForm.location" placeholder="请输入门店位置"></el-input>
            </el-form-item>
            <el-form-item label="门店电话">
                  <el-input v-model="addForm.telephone" placeholder="请输入门店电话"></el-input>
            </el-form-item>
            <el-form-item label="门店名字">
                  <el-input v-model="addForm.storeName" placeholder="请输入门店名字"></el-input>
            </el-form-item>
            <el-form-item>
                  <el-button @click="detailDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleAdd">确 定</el-button>    
              </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
          title="修改店铺"
          :visible.sync="detailDialogVisible"
          width="30%"
          >
          <el-form :model="modifyForm" class="demo-form-inline">
          <el-form-item label="门店位置">
                  <el-input v-model="addForm.location" placeholder="请输入门店位置"></el-input>
            </el-form-item>
            <el-form-item label="门店电话">
                  <el-input v-model="addForm.telephone" placeholder="请输入门店电话"></el-input>
            </el-form-item>
            <el-form-item label="门店名字">
                  <el-input v-model="addForm.storeName" placeholder="请输入门店名字"></el-input>
            </el-form-item>
          
          <el-form-item>
                  <el-button @click="detailDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleModify">确 定</el-button>    
          </el-form-item>
          </el-form>
      </el-dialog>
      </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        storedata: [],
        query:{
          userId: localStorage.getItem("jwt"),
        },
      
        detailDialogVisible: false,
        addDialogVisible: false,
        addForm:{},
        modifyForm:{}
      }
    },
    methods:{
      handleModify(){
        this.$axios.put("http://localhost:8082/modifyStore",this.modifyForm)
                  .then(response=>{//业务异常
                      if(response.data.code!='200'){
                          this.$message.error("修改失败："+response.data.message);
                      }
                  })
                  .catch(error=>{ //通信异常
                      console.error(error);
                  })
                  this.detailDialogVisible=false;
    }, 
      handledel(){
        this.$axios.post("http://localhost:8082/delStore",
                  {
                      params: {
                          storeId:this.storedata.id,
                         
                      }
                  }
        )
                  .then(response=>{//业务异常
                      if(response.data.code!='200'){
                          this.$message.error("删除失败："+response.data.message);
                      }
                  })
                  .catch(error=>{ //通信异常
                      console.error(error);
                  })
      },
      handleClick(row){
                  console.log(row);
                  this.modifyForm=row;
                  this.detailDialogVisible=true;
              }, 
       handleAdd(){
        this.$axios.post("http://localhost:8082/addStore",this.addForm)
                  .then(response=>{//业务异常
                      if(response.data.code!='200'){
                          this.$message.error("添加失败："+response.data.message);
                      }
                  })
                  .catch(error=>{ //通信异常
                      console.error(error);
                  })
    }     
        
    },
         
   
  mounted(){
    this.$axios.get("http://localhost:8082/getStore",this.query)
      .then(resp=>{
          
          let result = resp.data;
          if(result.code=='200'){
              this.storedata=result.data;
              
          }
      })
      .catch(error=>{})
  }           
  }
  
</script>
<style>
  
</style>
